<template>
	<view>
		<block v-for="(days, week) in weeksData" :key="week">
			<view class="uni-calender__body-date-week">
				<block v-for="(day, index) in days" :key="index">
					<view class="uni-calender__date" :class="{
							'uni-calender__disable': day.disable,
							'uni-calender__date-current':day.current,
							'uni-calender__lunar': lunar,
							'uni-calender__active': day.isDay,
							'uni-calender__is-day': day.isDay
						}"
					 @tap="
							selectDays(
								week,
								index,
								!day.disable,
								day.disable,
								canlender.lunar
							)
						">
						<view :class="['uni-calender__circle-box']">
							{{ day.date }}
							<!--<view v-if="lunar" class="uni-calender__lunar">{{ day.lunar }}</view>-->
							<!-- <view v-if="day.have" class="uni-calender__data-circle"></view> -->
						</view>
					</view>
				</block>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'uni-calendar-item',
		props: {
			/**
			 * 当前日期
			 */
			canlender: {
				type: null,
				default: () => {
					return {};
				}
			},
            initCanlender: {
                type: null,
                default: () => {
                    return {};
                }
			},
            /*
			是否显示当前周
			*/
            showCurrentWeek:{
                type:Boolean,
                default:false
            },
			lunar: {
				type: Boolean,
				default: false
			},
            disableBefore: {
                type: Boolean,
                default: false
            },
            /*
            是否禁用今天之后的日期
            */
            disableAfter: {
                type: Boolean,
                default: true
            },
		},
		data() {
			return {
				
			};
		},
		watch:{
//            showCurrentWeek:function (newVal) {
//				console.log('showCurrentWeek:',newVal);
//            }
		},
		computed:{
		    weeks(){
		        /*
		        定义disable
		         */
                this.canlender.weeks.forEach(
                    days=>{
                        days.forEach(
                            day=>{
                                //canlender.month > day.month || day.disable
								//day.disable =
								if(this.canlender.year<this.initCanlender.year
									||(this.canlender.year == this.initCanlender.year&&this.canlender.month<this.initCanlender.month)){
								    day.disable = false
								}else
								if(this.canlender.year>this.initCanlender.year
                                    ||(this.canlender.year == this.initCanlender.year&&this.canlender.month>this.initCanlender.month)){
                                    day.disable = true
								    return;
								}else
								if(this.initCanlender.month > day.month){
                                    day.disable = this.disableBefore
								}else if(this.initCanlender.month < day.month){
                                    day.disable = this.disableAfter
								}

                                    // day.current = (day.date == this.canlender.date || day.checked) &&
                                    //     (this.canlender.month == day.month) &&
                                    //     !day.disable;
                                day.current = (day.date == this.canlender.date) &&
                                    (this.canlender.month == day.month);

							}
						)
					}
				)
		        return this.canlender.weeks;
			},
		    weeksData(){
				if(this.showCurrentWeek){
					const {date,month} = this.canlender;
					const currentWeek =  this.weeks.find(s=>{
					    return s.find(s_=>(s_.date == date)&&(s_.month==month))!=undefined
					});
					console.log('currentWeek:',currentWeek)
					return [currentWeek];
				}
				return this.weeks;
			}
		},
		methods: {
			selectDays(week, index, ischeck, isDay) {
			    if (ischeck){
                    this.$emit('selectDays', {
                        week,
                        index,
                        ischeck,
                        isDay,
                        //lunar
                    });
				}
			}
		},
	};
</script>

<style lang="scss">
	.uni-calender__body-date-week {
		display: flex;
		width: 100%;
		// border-bottom: 1px #f5f5f5 solid;

		&:last-child {
			border: none;
		}

		// 日期的样式
		.uni-calender__date {
			position: relative;
			width: 100%;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #000;
			background: #fff;
			// line-height: 100upx;
			box-sizing: border-box;
			padding: 5upx 0;
			line-height: 1.5;
			font-size: 24upx;

			.uni-calender__lunar {
				font-size: 20upx;
				color: #000;
			}

			.uni-calender__circle-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 44upx;
				height: 44upx;
				flex-shrink: 0;
				border-radius: 50%;
				transition: all 0.2s;
				color: #333;
        position: relative;
			}

			&.uni-calender__lunar {
				// 			padding: 20upx 0;
				// 			line-height: 1.5;
			}

			// 本月禁止的样式
			&.uni-calender__disable {
				color: #999999;
				.uni-calender__lunar {
					color: #d4d4d4;
				}
				.uni-calender__circle-box {
					color: #999999;
				}
			}
			&.uni-calender__disable_afterSelect{
				color:#999999
			}

			&.uni-calender__is-day {
				color: #fd2e32;
			}

			&.uni-calender__is-day .uni-calender__lunar {
				color: #fd2e32;
			}

			// 当前选中
			&.uni-calender__date-current {
				// background: #000;
				color: #fff;
				box-sizing: border-box;

				.uni-calender__circle-box {
					background: #377cfd;
					color: #fff;
				}

				&.uni-calender__active {}

				.uni-calender__lunar {
					color: #fff;
				}
			}

			.uni-calender__data-circle {
				position: absolute;
				// bottom: 10rpx;
				top: 10upx;
				right: 10upx;
				// margin: auto;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: #ff5a5f;
				z-index: 2;
			}
		}
	}
	.dot {
		&::after {
			content:'';
			width: 6upx;
			height: 6upx;
			background-color: #f15151;
			border-radius: 50%;
			position: absolute;
			bottom: -4upx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>
